import React, {useEffect} from 'react';
import useGetPageInfo from "../../../hooks/useGetPageInfo";
import {Form, Input} from "antd";
import {useDispatch} from "react-redux";
import {resetPageInfo} from "../../../redux/pageinfoReducer";

const {TextArea} = Input
const PageSetting: React.FC = () => {
  const pageInfo = useGetPageInfo()
  const [form] = Form.useForm()
  const dispatch = useDispatch()
  useEffect(() => {
    form.setFieldsValue(pageInfo)
  }, [pageInfo]);

  function handleChange() {
    dispatch(resetPageInfo(form.getFieldsValue()))
  }

  return (
    <Form layout={'vertical'}
          form={form}
          initialValues={pageInfo}
          onValuesChange={handleChange}>
      <Form.Item label={'问卷标题'} rules={[{required: true, message: '请输入标题'}]} name={'title'}>
        <Input placeholder={'请输入要输入的标题'}/>
      </Form.Item>
      <Form.Item name={'desc'} label={'页面描述'}>
        <TextArea placeholder={'请输入页面描述'}/>
      </Form.Item>
      <Form.Item name={'js'} label={'页面代码'}>
        <TextArea placeholder={'请输入js代码'}/>
      </Form.Item>
      <Form.Item name={'css'} label={'样式代码'}>
        <TextArea placeholder={'请输入样式代码'}/>
      </Form.Item>
    </Form>
  );
};

export default PageSetting;
